<template>
    <div class="an-page-children an-reg">
        <van-nav-bar
            title="注册"
            left-text=""
            left-arrow
            @click-left="clickBack"
            />

        <van-form ref="anForm" @submit="onSubmit" class="an-form">
            <van-field
                v-model="username"
                name="username"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ validator:validaPassword, message: '请填写密码' }]"
            />
            <van-field
                v-model="password2"
                type="password"
                name="password2"
                label="确认密码"
                placeholder="密码"
                :rules="[{ validator:validaPassword2, message: msgPassword2 }]"
            />
            <van-field
                v-model="email"
                name="email"
                label="邮箱"
                placeholder="邮箱"
                :rules="[{ validator:validaEmail, message: '请正确填写的邮箱' }]"
            />
            <van-field
                v-model="phone"
                type="tel"
                name="phone"
                label="手机号"
                placeholder="手机号"
                :rules="[{ validator:validatPhone, message: '请正确填写手机号' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="danger" native-type="submit" >
                提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import {validaEmail, validatPhone} from "@/utils/validate";
import md5 from 'js-md5';
export default {
  data() {
    return {
      username: '',
      password: '',
      password2:'',
      email:'',
      phone:''
    };
  },
  methods:{
    validatPhone,
    validaEmail,

    // 密码校验
    validaPassword(val) {
      if(!val) {
        return false;
      }else if(val.length<4) {
        return false;
      }else if(this.password2 !== '') {
        this.$refs.anForm.validate('password2').then().catch(e => {console.log(e);});
        return;
      }else{
        return true;
      }
    },
    // 第二次输入密码 校验
    validaPassword2(val) {
      if(!val) {
        return false;
      }else if(val != this.password) {
        return false;
      }
    },
    msgPassword(val) {
      if(val.length<4) {
        return "密码长度不少于4位数";
      }else{
        return "请填写密码";
      }
    },
    // 第二次输入密码 错误提示
    msgPassword2(val) {
      if(val != this.password) {
        return '两次密码输入不一致';
      }else{
        return "请再次填写密码";
      }
    },

    // 提交表单
    onSubmit(val) {
      let nd = Object.assign(val);
      nd.password = md5(nd.password);
      delete nd.password2;
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner'
      });
      this.checkUser(nd,val => {
        this.$api.register(val).then(() => {
          this.$toast.success('注册成功');
          this.clearForm();
          // 1秒后跳转登录页面
          setTimeout(() => {
            this.$router.push({path:'/login'});
          },1000);
        });
      });
    },

    // 检查用户名 邮箱 手机号 是否可用
    checkUser(val, callBack) {
      this.$api.checkUser(val).then(res => {
        let msg;
        if(res == 1) {
          msg = '用户名已被注册';
        }else if(res == 2) {
          msg = '邮箱已被注册';
        }else if(res == 3) {
          msg = '手机号已被注册';
        }
        this.$toast(msg);
        if(res == 0) {
          callBack(val);
        }
      });
    },

    // 清空密码
    clearForm() {
      this.password = '';
      this.password2 = '';
    },

    // 后退
    clickBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.an-reg{
    .an-form{
        padding-top: 15px;
    }
}
</style>